<template>
  <div class="container">
    <home-header
        :is-collapse="isCollapse"
        @collapse="isCollapse = !isCollapse "
    />
    <section class="home-content">
      <el-menu
          router
          :default-active="defaultRouter"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose">
        <menu-item :item="o" v-for="(o,index) in NavigateItem" :key="o.path"/>
      </el-menu>
      <div class="content">
        <router-view></router-view>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import HomeHeader from '../../components/HomeHeader.vue'
import MenuItem from "../../components/MenuItem.vue"
import {defineComponent, reactive, ref} from 'vue'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: "Home",
  components: {
    MenuItem,
    HomeHeader
  },
  setup() {
    const $router = useRouter()
    const $route = useRoute();
    const defaultRouter = $route.path;

    const isCollapse = ref(false)
    const handleOpen = (key: string, keyPath: string[]) => {
      // $router.push(key);
    }
    const handleClose = (key: string, keyPath: string[]) => {
      // $router.push(key);
    }

    const NavigateItem = reactive([
      {
        text: "主页",
        path: "/Home",
        icon: 'HomeFilled',
        children: [],
      },
      {
        text: "报表",
        path: "/Line",
        icon: 'Location',
        children: [{
          text: "折线图",
          path: "/Line",
          icon: 'DataLine',
          children: [],
        }, {
          text: "柱形图",
          path: "/Column",
          icon: 'Histogram',
          children: [],
        }, {
          text: "饼图",
          path: "/Pie",
          icon: 'PieChart',
          children: [],
        },],
      },
      {
        text: "后台管理",
        path: "/UserList",
        icon: 'HomeFilled',
        children: [{
          text: "用户列表",
          path: "/UserList",
          icon: 'User',
          children: [],
        }, {
          text: "异常日志",
          path: "/ErrorLog",
          icon: 'Failed',
          children: [],
        },],
      },
      {
        text: "调试专用页面",
        path: "/Demo",
        icon: 'NoSmoking',
        children: [],
      },
    ]);

    return {
      NavigateItem,
      defaultRouter,
      isCollapse,
      handleClose,
      handleOpen
    }
  }
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;

  .home-header {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 48px;
    background-color: #545c64;
    padding-left: 16px;

    .home-header-logo {
      width: 32px;
      height: 32px;
      margin-right: 8px;

      img {
        width: 100%;
        object-fit: cover;
      }
    }


    h1 {
      margin: 0;
      color: #fff;
      font-size: 24px;
    }

    .flod {
      cursor: pointer;
      margin-left: 20px;
      transition: all 1s;

      :hover {
        color: $myPrimaryColor;
      }
    }

    .avatar {
      position: absolute;
      display: flex;
      align-items: center;
      right: 30px;
    }

    span {
      color: #fff;
      margin-left: 10px;
      font-size: 14px;
    }
  }

  .home-content {
    height: calc(100% - 48px);
    display: flex;
    padding: 8px 0 8px 8px;
    background-color: #f2f2f2;
    box-sizing: border-box;
    align-items: center;

    .el-menu-vertical-demo {
      height: 100%;
      border-right: 0;
      border-radius: 6px;
      overflow-y: auto;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 240px;
    }

    .content {
      border-radius: 6px;
      padding: 0 8px;
      box-sizing: border-box;
      flex: 1;
      height: 100%;
      overflow-y: auto;
    }

  }
}
</style>